-
Notifications
You must be signed in to change notification settings - Fork 183
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add support for Sass pkg:
importers
#384
Conversation
Matches the RequestService passed in from the language server extension.
src/cssLanguageTypes.ts
Outdated
@@ -284,6 +284,7 @@ export interface FileStat { | |||
export interface FileSystemProvider { | |||
stat(uri: DocumentUri): Promise<FileStat>; | |||
readDirectory?(uri: DocumentUri): Promise<[string, FileType][]>; | |||
getContent?(uri: DocumentUri, encoding?: BufferEncoding): Promise<string>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Matches the RequestService
on the language server side
src/services/cssNavigation.ts
Outdated
// look for the `exports` field of the module and any `sass`, `style` or `default` that matches the import. | ||
// If it's only `pkg:module`, also look for `sass` and `style` on the root of package.json. | ||
if (target.startsWith('pkg:')) { | ||
const bareTarget = target.replace('pkg:', ''); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can this be extracted in a method ?
src/services/cssNavigation.ts
Outdated
try { | ||
return await this.fileSystemProvider.getContent(uri); | ||
} catch (err) { | ||
console.error(err); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should not print to console
Thanks @wkillerud. I made some improvements and moved the code to |
Fixes #383
Hello 👋 I'm opening a PR with a suggested solution for #383
As mentioned in the issue, Sass released a new syntax for import strings, which I imagine trips up a lot of tools. I find the documentation for NodePackageImporter has the most readable explanation of the different supported scenarios. Also relevant here is the Node documentation on subpath patterns.
It's a big chunk with many different code paths, I'll admit. I've tried documenting at a reasonable level, and added tests that should cover a lot of scenarios. That said, I understand if you're hesitant to add yet more module resolution logic here.
I've tested locally with
npm link
in a running extension using these test fixtures, and the resolution provides correct links for me. Recording of that below.CleanShot.2024-02-16.at.21.51.49.mp4
Considered alternatives
Sass's JavaScript API includes the aforementioned NodePackageImporter. Its implementation seems to have a function
canonicalize
, which looked promising as a method of looking up an import string. Unfortunately it's not part of the public API.The result from
sass.compile
includes all the loaded URLs, so I'm sure you could hack something together there (pass in a string that only@use
s thepkg:module
import in question). It would require bundlingsass
though, which is also technically possible now.